<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_cjyyzx.png'
const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}


</script>

<template>
  <Header></Header>
  <div class="details">
    <div>
      <img :src="img">
    </div>
    <div class="page-layout">
      <Sidebar @sidebar-click="handleSidebarClick">
        <template #title>
          <span>场景应用中心</span>
        </template>
      </Sidebar>
      <div class="main-content">
        <!-- 首页内容 -->
        <div class="content-section" :class="activeKey===0 && 'active'" id="home">
          <h2 class="page-title">场景应用中心</h2>
          <p class="page-subtitle">连接技术与场景，赋能产业数字化转型</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="场景应用中心" class="intro-image">

          <div class="content-text">
            <p>场景应用中心是创新服务平台的核心应用展示平台，聚焦各行业数字化转型需求，提供从技术到场景的完整解决方案。中心汇聚了来自智能制造、智慧城市、数字医疗、智慧农业等领域的200多个成功案例。</p>
            <p>我们致力于连接前沿技术与实际应用场景，通过展示优秀案例、提供解决方案咨询、组织场景对接活动等方式，帮助企业找到最适合的技术应用路径，加速数字化转型进程。</p>
            <p>场景应用中心已服务超过1000家企业，促成300多项技术应用合作，成为区域数字化转型的重要支撑平台。</p>
          </div>

          <h3>典型应用场景</h3>
          <div class="scenario-grid">
            <div class="scenario-card">
              <h3>智能制造</h3>
              <p>基于工业互联网的智能工厂解决方案，实现生产全流程数字化管理。</p>
              <span class="scenario-tag">工业4.0</span>
              <span class="scenario-tag">数字孪生</span>
            </div>

            <div class="scenario-card">
              <h3>智慧城市</h3>
              <p>城市大脑平台整合多源数据，提升城市治理能力和公共服务水平。</p>
              <span class="scenario-tag">城市治理</span>
              <span class="scenario-tag">数字政府</span>
            </div>

            <div class="scenario-card">
              <h3>数字医疗</h3>
              <p>AI辅助诊断、远程医疗和智慧医院建设，提升医疗服务效率。</p>
              <span class="scenario-tag">智慧医院</span>
              <span class="scenario-tag">AI医疗</span>
            </div>

            <div class="scenario-card">
              <h3>智慧农业</h3>
              <p>农业物联网和精准农业技术，实现农业生产智能化管理。</p>
              <span class="scenario-tag">精准农业</span>
              <span class="scenario-tag">数字乡村</span>
            </div>

            <div class="scenario-card">
              <h3>智慧交通</h3>
              <p>智能交通管理系统和车路协同技术，提升交通运行效率。</p>
              <span class="scenario-tag">智能网联</span>
              <span class="scenario-tag">智慧停车</span>
            </div>

            <div class="scenario-card">
              <h3>智慧教育</h3>
              <p>个性化学习平台和虚拟仿真教学，推动教育数字化转型。</p>
              <span class="scenario-tag">在线教育</span>
              <span class="scenario-tag">虚拟实验</span>
            </div>
          </div>
        </div>

        <!-- 建设概况内容 -->
        <div class="content-section" :class="activeKey===1 && 'active'" id="construction">
          <h2 class="page-title">建设概况</h2>
          <p class="page-subtitle">场景应用中心的发展历程与建设成果</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="场景应用中心建设" class="intro-image">

          <div class="content-text">
            <p>场景应用中心于2022年启动建设，总投资1.5亿元人民币，是区域首个专注于数字化转型场景应用的公共服务平台。</p>
            <p>
              中心建设分为三个阶段：一期工程（2022-2023年）完成了基础平台搭建和核心场景库建设；二期工程（2023-2024年）实现了场景展示和对接服务的数字化；三期工程（2024-2025年）将重点打造行业垂直场景和跨领域融合应用。
            </p>
            <p>目前，场景应用中心已整合了来自200多家企业和50多个科研机构的场景解决方案，服务用户超过800家，日均访问量超过5000次。</p>
          </div>

          <h3>技术架构</h3>
          <div class="architecture">
            <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="场景应用中心技术架构">
          </div>

          <div class="content-text">
            <p>场景应用中心采用"平台+生态"的建设模式，构建了场景展示、需求对接、方案验证和技术服务的完整服务体系。</p>
            <p>平台核心功能包括：场景数字化展示系统、需求智能匹配引擎、解决方案评估工具和在线对接服务平台。通过大数据和人工智能技术，实现技术与场景的高效对接。</p>
          </div>
        </div>

        <!-- 政策资讯内容 -->
        <div class="content-section" :class="activeKey===2 && 'active'" id="policy">
          <h2 class="page-title">政策资讯</h2>
          <p class="page-subtitle">关于场景应用中心的相关政策和支持措施</p>

          <div class="policy-list">
            <div class="policy-item">
              <h3>《数字化转型场景应用促进办法》</h3>
              <p>发布部门：市工信局 | 发布时间：2025年4月15日</p>
              <p>该办法提出了加强场景资源整合、推动技术应用落地、培育场景服务产业等5个方面的政策措施。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《场景应用中心企业服务补贴方案》</h3>
              <p>发布部门：市科技局 | 发布时间：2025年3月20日</p>
              <p>方案明确了企业使用场景应用中心服务的补贴标准和申请流程，最高可获50%的费用补贴。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《数字化转型优秀场景评选办法》</h3>
              <p>发布部门：市发改委 | 发布时间：2025年2月10日</p>
              <p>办法规范了数字化转型优秀场景的评选标准和流程，每年评选100个优秀应用场景给予奖励。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>
          </div>
        </div>

        <!-- 活动报道内容 -->
        <div class="content-section" :class="activeKey===3 && 'active'" id="activity">
          <h2 class="page-title">活动报道</h2>
          <p class="page-subtitle">场景应用中心相关活动与新闻报道</p>

          <div class="news-list">
            <div class="news-item">
              <div class="news-date">2025-06-18</div>
              <div class="news-content">
                <h3><a href="javascript:;">场景应用中心与10家行业龙头企业签署战略合作协议</a></h3>
                <p>场景应用中心与本地10家行业龙头企业签署合作协议，共同推进数字化转型场景应用。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-05-12</div>
              <div class="news-content">
                <h3><a href="javascript:;">场景应用中心二期平台正式上线</a></h3>
                <p>场景应用中心二期平台完成升级，新增虚拟现实展示和智能匹配功能，服务能力大幅提升。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-04-05</div>
              <div class="news-content">
                <h3><a href="javascript:;">场景应用中心荣获"最佳数字化转型平台"奖</a></h3>
                <p>在2025中国数字经济大会上，场景应用中心荣获"最佳数字化转型平台"奖项。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-03-01</div>
              <div class="news-content">
                <h3><a href="javascript:;">场景应用中心场景数量突破500个</a></h3>
                <p>场景应用中心汇聚的数字化转型场景数量突破500个，覆盖20多个行业领域。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 服务介绍内容 -->
        <div class="content-section" :class="activeKey===4 && 'active'" id="service">
          <h2 class="page-title">服务介绍</h2>
          <p class="page-subtitle">场景应用中心提供的各类服务</p>

          <div class="service-list">
            <div class="service-item">
              <h3>场景展示服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="场景展示" class="service-image">
                <div class="service-text">
                  <p>提供数字化转型场景的数字化展示平台，通过图文、视频、虚拟现实等多种形式，全面展示各类场景应用案例。</p>
                  <p>服务特点：多维度展示、交互式体验、案例库管理</p>
                  <p>适用场景：技术应用展示、案例推广、经验分享等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>需求对接服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="需求对接" class="service-image">
                <div class="service-text">
                  <p>连接技术供给方和应用需求方，提供精准的需求匹配和对接服务，促进技术应用落地。</p>
                  <p>服务特点：智能匹配、专业对接、全程跟踪</p>
                  <p>适用场景：技术供需对接、解决方案寻找、合作伙伴匹配等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>方案验证服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="方案验证" class="service-image">
                <div class="service-text">
                  <p>提供数字化转型方案的验证环境和技术支持，帮助企业在实际应用前验证方案的可行性。</p>
                  <p>服务特点：模拟环境、专家评估、优化建议</p>
                  <p>适用场景：方案可行性验证、技术选型评估、实施风险控制等</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-layout{
  display: flex;
  margin-top: 20px;
}
/* 右侧内容区 */
.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

/* 页面标题样式 */
.page-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

/* 内容图片 */
.intro-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 文本内容 */
.content-text {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 应用场景网格 */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.scenario-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s;
}

.scenario-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.scenario-card h3 {
  font-size: 18px;
  color: #1e5799;
  margin-bottom: 10px;
}

.scenario-card p {
  font-size: 14px;
  color: #666;
}

.scenario-tag {
  display: inline-block;
  background-color: #e0e9ff;
  color: #1e5799;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 5px;
  margin-top: 10px;
}

/* 新闻列表 */
.news-list {
  margin-top: 30px;
}

.news-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e0e9ff;
}

.news-date {
  width: 100px;
  color: #207cca;
  font-weight: bold;
}

.news-content {
  flex: 1;
}

.news-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.news-content p {
  color: #666;
  font-size: 14px;
}

.news-content a {
  color: #1e5799;
  text-decoration: none;
}

.news-content a:hover {
  text-decoration: underline;
}

/* 服务列表 */
.service-list {
  margin-top: 30px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #1e5799;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.service-content {
  display: flex;
  margin-bottom: 20px;
}

.service-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.service-text {
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

/* 政策列表 */
.policy-list {
  margin-top: 30px;
}

.policy-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fbff;
  border-radius: 8px;
  border-left: 4px solid #207cca;
}

.policy-item h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.policy-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.policy-item a {
  color: #207cca;
  text-decoration: none;
  font-size: 14px;
}

/* 技术架构 */
.architecture {
  text-align: center;
  margin: 40px 0;
}

.architecture img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
</style>